<template>
  <div class="link flex">
    <table border="1" class="tabledata">
      <tr>
        <td colspan="22" class="bg" style="font-size: 16px; font-weight: bold">干熄炉生产及工艺控制情况</td>
      </tr>
      <tr>
        <td colspan="11">生产情况</td>
        <td colspan="7">工艺控制情况</td>
        <td colspan="3" rowspan="8">
          <textarea cols="30" rows="10" v-model="content" v-if="!date.isup"></textarea>
          <div v-else style="white-space: pre-line;text-align: left;width: 200px;">{{content}}</div>
        </td>
      </tr>
      <tr>
        <td rowspan="4"><div style="width: 70px;">干熄炉炉号</div></td>
        <td rowspan="2">出炉数</td>
        <td rowspan="2">月累计出炉数</td>
        <td rowspan="2">干焦日产量</td>
        <td rowspan="2">干焦月累计产量</td>
        <td rowspan="2">污氮日耗量</td>
        <td rowspan="2">污氮月累计 耗量</td>
        <td rowspan="2" colspan="2">各处焦炭料位(m)</td>
        <td colspan="2">汽机发电量（万kw·h）</td>
        <td rowspan="4"><div style="width: 70px;">干熄炉炉号</div></td>
        <td colspan="3">蒸汽指标</td>
        <td rowspan="2">循环风量</td>
        <td rowspan="2">排焦温度</td>
        <td>焦粉</td>
      </tr>
      <tr>
        <td>1#日发电量</td>
        <td>2#日发电量</td>
        <td>压力</td>
        <td>流量</td>
        <td>温度</td>
        <td>
          <input type="number" class="dinput" v-model="jiaofen" v-if="!date.isup"/>
          <span v-else>{{jiaofen}}</span>
        </td>
      </tr>
      <tr>
        <td rowspan="2" colspan="2">(炉)</td>
        <td rowspan="2" colspan="2">(t)</td>
        <td rowspan="2" colspan="2">(万m³)</td>
        <td><div style="width: 60px;">筛焦楼</div></td>
        <td><input type="number" class="dinput" v-model="shaijl" v-if="!date.isup"/>
          <span v-else>{{shaijl}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="onefdl" v-if="!date.isup"/>
          <span v-else>{{onefdl}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="twofdl" v-if="!date.isup"/>
          <span v-else>{{twofdl}}</span>
        </td>
        <td rowspan="2">(Mpa)</td>
        <td rowspan="2">(t)</td>
        <td rowspan="2">(℃)</td>
        <td rowspan="2">万m³/h</td>
        <td rowspan="2">(℃)</td>
        <td>焦末</td>
      </tr>
      <tr>
        <td>中间仓</td>
        <td><input type="number" class="dinput" v-model="zhongjc" v-if="!date.isup"/>
          <span v-else>{{zhongjc}}</span>
        </td>
        <td>月累计量</td>
        <td>
          <input type="number" class="dinput" v-model="yljfdl" v-if="!date.isup"/>
          <span v-else>{{yljfdl}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="jiaomo" v-if="!date.isup"/>
          <span v-else>{{jiaomo}}</span>
        </td>
      </tr>
      <tr v-for="item in 2">
        <td>{{ item }}#干熄炉</td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['cls' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['cls' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['yljcls' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['yljcls' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['gjrcl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['gjrcl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['gjycl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['gjycl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['wdrhl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['wdrhl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['wdyhl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['wdyhl' + item]}}</span></td>
        <!-- 第一行 -->
        <td v-if="item == 1">干熄炉</td>
        <td v-if="item == 1">
          <input type="number" class="dinput" v-model="ganxl" v-if="!date.isup"/>
          <span v-else>{{ganxl}}</span>
        </td>
        <td colspan="2" v-if="item == 1">外送蒸汽量（t）</td>
        <!-- 第二行 -->
        <td v-if="item == 2">大焦仓</td>
        <td v-if="item == 2">
          <input type="number" class="dinput" v-model="dajc" v-if="!date.isup"/>
          <span v-else>{{dajc}}</span>
        </td>
        <td v-if="item == 2">日外送量</td>
        <td v-if="item == 2">月累积量</td>
        <td>{{ item }}#炉</td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['yali' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['yali' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['liuliang' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['liuliang' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['wendu' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['wendu' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['xhfl' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['xhfl' + item]}}</span></td>
        <td><input type="number" class="dinput" v-model="inputs[item - 1]['pjwd' + item]" v-if="!date.isup"/><span v-else>{{inputs[item - 1]['pjwd' + item]}}</span></td>
        <td v-if="item == 1">平均装焦量</td>
        <!-- 第二行 -->
        <td v-if="item == 2">
          <input type="number" class="dinput" v-model="pjzjl" v-if="!date.isup"/>
          <span v-else>{{pjzjl}}</span>
        </td>
      </tr>
      <tr>
        <td>合计</td>
        <td>{{cls}}</td>
        <td>{{yljcls}}</td>
        <td>{{gjrcl}}</td>
        <td>{{gjycl}}</td>
        <td>{{wdrhl}}</td>
        <td>{{wdyhl}}</td>
        <td>火运仓</td>
        <td>
          <input type="number" class="dinput" v-model="huoyc" v-if="!date.isup"/>
          <span v-else>{{huoyc}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="wsrwsl" v-if="!date.isup"/>
          <span v-else>{{wsrwsl}}</span>
        </td>
        <td>
          <input type="number" class="dinput" v-model="wsyljl" v-if="!date.isup"/>
          <span v-else>{{wsyljl}}</span>
        </td>
        <td></td>
        <td></td>
        <td>{{liuliang}}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts" setup name="gxlscjgykzqk">
import cache from "@/utils/cache";
import { getGxlscjgykzqk, gxlscjgykzqkSave, gxlscjgykzqkSubmit } from "@/api/report";
// 循环生成绑定数据  一共2行
const arr = [];
for (let i = 1; i <= 2; i++) {
  arr.push({
    ["cls" + i]: "",
    ["yljcls" + i]: "",
    ["gjrcl" + i]: "",
    ["gjycl" + i]: "",
    ["wdrhl" + i]: "",
    ["wdyhl" + i]: "",
    ["yali" + i]: "",
    ["liuliang" + i]: "",
    ["wendu" + i]: "",
    ["xhfl" + i]: "",
    ["pjwd" + i]: "",
  });
}
// 整表 数据绑定
const inputs = ref(arr);
// 记事
const content = ref('记事：');
// 1#日发电量  2#日发电量
const onefdl = ref(0);
const twofdl = ref(0);
// 月累计量
const yljfdl = ref(0);
// 外送蒸汽量 日外送量和月累计
const wsrwsl = ref(0);
const wsyljl = ref(0);
// 焦粉
const jiaofen = ref(0);
// 焦末
const jiaomo = ref(0);
// 平均装焦量
const pjzjl = ref(0);
// 各处焦炭料位
const shaijl = ref(0);
const zhongjc = ref(0);
const ganxl = ref(0);
const dajc = ref(0);
const huoyc = ref(0);

// 合计
const cls = ref(0);
const yljcls = ref(0);
const gjrcl = ref(0);
const gjycl = ref(0);
const wdrhl = ref(0);
const wdyhl = ref(0);
const liuliang = ref(0);

// 深层监听数据修改  根据数据变化 从新计算合计
watch(inputs, async (n) => {
  let i = 1;
  let a = 0, b = 0,c = 0,d = 0,e = 0,f = 0,g = 0,h = 0,j = 0;
  n.forEach((item)=>{
    a += Number(item['cls'+i])
    b += Number(item['yljcls'+i])
    c += Number(item['gjrcl'+i])
    d += Number(item['gjycl'+i])
    g += Number(item['wdrhl'+i])
    h += Number(item['wdyhl'+i])
    j += Number(item['liuliang'+i])
    
    i++
  });
  cls.value = a.toFixed(2);
  yljcls.value = b.toFixed(2);
  gjrcl.value = c.toFixed(2);
  gjycl.value = d.toFixed(2);
  wdrhl.value = g.toFixed(2);
  wdyhl.value = h.toFixed(2);
  liuliang.value = j.toFixed(2);
},{ deep: true })

const save = async () => {
  let userInfo = cache.get('userInfo')
  await gxlscjgykzqkSave({
    inputs:inputs.value,
    content: content.value,
    onefdl: onefdl.value,
    twofdl: twofdl.value,
    yljfdl: yljfdl.value,
    wsrwsl: wsrwsl.value,
    wsyljl: wsyljl.value,
    jiaofen: jiaofen.value,
    jiaomo: jiaomo.value,
    pjzjl: pjzjl.value,
    shaijl:shaijl.value,
    zhongjc:zhongjc.value,
    ganxl:ganxl.value,
    dajc:dajc.value,
    huoyc:huoyc.value,
    aid: userInfo.id,
    aname: userInfo.name,
    date:date.date,
  })
}
const uu = ref(cache.get('role_name'))
// 提交方法，调用接口
const submit = async () => {
  await gxlscjgykzqkSubmit({
    label:uu.value,
    date:date.date,
  })
}

onMounted(() => {
  getData()
})

const getData = async () => {
  getGxlscjgykzqk(date).then((res)=>{
    if(res.length>0){
      let newarr = []
      res.forEach((item,i)=>{
        let obj = {
          ["cls" +(i+1)]: item.cls,
          ["yljcls" +(i+1)]: item.yljcls,
          ["gjrcl" +(i+1)]: item.gjrcl,
          ["gjycl" +(i+1)]: item.gjycl,
          ["wdrhl" +(i+1)]: item.wdrhl,
          ["wdyhl" +(i+1)]: item.wdyhl,
          ["yali" +(i+1)]: item.yali,
          ["liuliang" +(i+1)]: item.liuliang,
          ["wendu" +(i+1)]: item.wendu,
          ["xhfl" +(i+1)]: item.xhfl,
          ["pjwd" +(i+1)]: item.pjwd,
        }
        newarr.push(obj)
      })
      content.value = res[0].content
      onefdl.value = res[0].onefdl
      twofdl.value = res[0].twofdl
      yljfdl.value = res[0].yljfdl
      wsrwsl.value = res[0].wsrwsl
      wsyljl.value = res[0].wsyljl
      jiaofen.value = res[0].jiaofen
      jiaomo.value = res[0].jiaomo
      pjzjl.value = res[0].pjzjl
      shaijl.value = res[0].shaijl
      zhongjc.value = res[0].zhongjc
      ganxl.value = res[0].ganxl
      dajc.value = res[0].dajc
      huoyc.value = res[0].huoyc
      
      inputs.value = newarr
    }else{
      inputs.value = arr
    }
  })
}
const date = defineProps(['date','isup'])
watch(date, async (n) => {
  getData()
})

defineExpose({
  save,
  submit
})

</script>

<style lang="scss" scoped>
.tabledata {
  width: 100%;
  border: 1px solid #aaa;
  td {
    text-align: center;
    border: 1px solid #aaa;
    padding: 3px;
  }
  .bg{
    background: #ccc;
  }
  .dinput{
    text-align: center;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #ccc;
  }
}
</style>
